SlideShare ist ein Scribd-Unternehmen logo
Top 10 Tips for Making Your Website Accessible
Accessibility isn’t just about accommodating people with disabilities. It’s all about
making the Internet accessible and free to everyone.
98% percent of websites are not completely accessible from a legal standpoint and this
is just from the U.S. This is bad news considering that everything from ordering pizza to
voting news is now done online. Therefore, web accessibility is an essential part of the
digital world and it benefits everyone. Before we jump into the main topic, let us cover
the basics first.
What is Web Accessibility?
Web accessibility is the practice of removing barriers that prevent users from accessing
your website. In a nutshell, it is making your website available to everyone. Web
accessibility involves all disabilities that affect access the web, including:
● Auditory
● Cognitive
● Neurological
● Physical
● Speech
● Visual
It also benefits people without disabilities such as people:
● Using devices of different screen sizes and OS such as mobile phones,
smartwatches, smart TVs, etc.
● With changing abilities because of old age
● With situational limitations such as bright sunlight where visibility is low or a
crowded atmosphere where they can’t listen to audio
● With slow or unstable internet connection
Making your website accessible is a vital step, so reading through a business case for
accessibility will help you learn more about it and the benefits it may provide for your
organization.
Now let us dive deep into a few tips to help you make your website accessible.
Top 10 Tips To Help You Make Your Website Accessible
1. Selecting the Right CMS
The advent of technology has provided us with many Content Management Systems
(CMS) such as WordPress, Joomla, etc. WordPress is one of the most popular CMS in
the mix and the good news is that it is well-equipped to handle accessibility. However,
other CMS like Joomla and Drupal, are also doing a great job when it comes to
accessibility.
After you zero in on a CMS that meets all your website requirements, the next step is to
choose a theme or design that is accessible. To learn more about the accessibility
features and tips in the theme or design, refer to the documentation on theme and
decide your layout and content. Make sure you stick to the same rules when choosing
modules, plugins, or widgets.
Take steps to ensure that editing toolbars and video players offer support while creating
accessible content. For example, headers and accessible tables should be available in
editing toolbars and closed captioning should be available in video players. Lastly,
check out the options that are provided in the CMS admin menu (for example: publish
blog post) are accessible.
2. Maintaining Heading Hierarchy
Always focus on readability when writing for a large audience. Make sure that the text is
simple and has a good flow so as to not confuse users. Maintain the heading hierarchy
(H1 to H6) as screen reader users depend on them to navigate the web page. Jumping
the heading levels will not convey the information to users as intended by the author.
Lastly, don’t use stylish fonts as they are difficult to read and understand for people with
low vision.
3. Using Alt-Text for Images
Alt-text is short for the alternative text that is provided for images, it helps in conveying
the information in the images to users with visual impairments. Search engine robots,
web crawlers, etc. do not read images and instead rely on alt text to understand the
images. Therefore having alt-text will also help in improving your SEO score.
However, care should be taken to exclude alt text from images that are used only as
decoration. In such cases, the alt text should be kept “” and screen readers will
understand that it is a decorative image and move on to the next content.
4. Providing Descriptive Links
Visually impaired people use their screen readers to scan the website for links. It is
impossible for screen reader users to understand the context of links with respect to the
rest of the page.
For example, if you plan on guiding users to the “About Us” page:
Avoid saying: “Click here to know more.”
Instead, try saying: “To learn more about our company, read About Us.”
This helps users to understand the destination of the link without the trouble of going
through the web page to understand the context.
5. Maintaining Color and Contrast
People with color blindness will have a lot of difficulties if the information or response
required is only dependent on the color. Therefore avoid using only color as a means to
convey information to users and provide alternate ways to access that content.
Here is a free chrome extension that simulates information a color-blind person receives
and/or adds a daltonization filter. Check it out to get a brief idea on how users with color
blindness view websites.
6. Using Accessible Forms
Forms should follow the same contrast ratio as explained in the color and contrast
category. Avoid using the placeholder text must be always avoided wherever possible.
Labels and hints should be used outside the boxes for easy understanding. Autofill
should also be enabled for faster filling up of forms which will also help people without
disabilities.
Finally, avoid using CAPTCHA as it is difficult for users with visual and cognitive
impairments to access it. Furthermore, it should also not be used to validate any
submissions.
7. Using Tables in Accessible Format
Avoid using tables as the only means of communicating information to users as it
discourages people with blindness and visual impairment from checking your content.
Add them only if they are absolutely necessary and make sure that they follow
accessibility standards for tables.
8. Having a Keyboard-Friendly Website
What if you used only a keyboard to navigate the web for a whole day? In 2018, a BBC
news reporter did exactly that and had a compelling case study to report.
Let us first understand who uses only the keyboard to navigate. We can broadly
classify them into three categories:
● Mobility-impaired users who have difficulties using a mouse
● Vision-impaired users who can’t distinguish clickable elements in the web page
● Users who are more comfortable and prefer using a keyboard over the mouse
Here are some tips to ensure your website is keyboard-friendly:
● Web pages with a lot of content should be broken up with anchor links that assist
users to navigate to their desired part of the web page and skip content that is
not useful to them.
● Provide the “Skip to main content” option at the top of each page so that users
can directly land on the main content using the keyboard.
● Avoid using elements that can only be activated when you hover the mouse over
them as keyboard and screen reader users can’t access them.
● Keyboard users use the tab key to navigate web pages, therefore the tab order
should match the visual order so as to not confuse users.
9. Following Rules for ARIA Labels Usage
Accessible Rich Internet Applications (ARIA) is an acronym for Accessible Rich Internet
Applications. The ARIA principles describe how to make a website accessible to
persons who use assistive technology.
Here are some examples of using the ARIA label in the right way:
● Adding alerts or notifications to screen reader users to notify them of dynamic
page changes like stock tickers and search filters.
● Providing screen reader users with access to complicated, interactive widgets
like date pickers.
10. Making your Dynamic Content Accessible
Sometimes, websites have content that automatically updates and that might not be
noticed by screen reader users.
Here are some examples:
● Screen overlays
● Lightboxes
● In-page updates
● Modal dialogs
This content should also be made accessible to users as it is an integral part of a
website. Make sure that video players should not automatically play videos as it might
cause panic to visually impaired users as they did not activate them. Furthermore,
closed captions and transcripts should be available for all videos as it helps users with
auditory impairments.
Wrapping up
Imagine you are in a crowded place and you receive a video link on Facebook from your
friend. It will be a herculean task for you to understand that video, but if it has captions,
you can easily view the video on mute and enjoy the video. Transcripts and closed
captions give an easy workaround for watching multimedia irrespective of the
environment that you are in.
One of the internet’s core ideals is freedom, and accessibility is one of the most effective
instruments for achieving that aim. Now is your chance to make a difference and participate
actively in this noble path of making the web accessible to everyone.

Weitere ähnliche Inhalte

Ähnlich wie Top 10 Tips for Making Your Website Accessible

Mobile web design
Mobile web designMobile web design
Mobile web design
gvxwedimogene
 
RBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsRBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & Recommendations
Sivaprasad Paliyath (CUA - HFI)
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
Farmanzaland
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
Denise Jacobs
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
Margarida Sousa
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035
FNian
 
Web Accessibility Audit_ Ensuring Inclusivity Online.pptx
Web Accessibility Audit_ Ensuring Inclusivity Online.pptxWeb Accessibility Audit_ Ensuring Inclusivity Online.pptx
Web Accessibility Audit_ Ensuring Inclusivity Online.pptx
EmmaJones273085
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
Emagination ®
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
Mindfire Solutions
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web Accessibility
Andrea Dubravsky
 
Usability thinking
Usability thinkingUsability thinking
Usability thinking
Vladimir garnele
 
Web Accessibility Made Easy_ Strategies for Inclusive Design.pptx
Web Accessibility Made Easy_ Strategies for Inclusive Design.pptxWeb Accessibility Made Easy_ Strategies for Inclusive Design.pptx
Web Accessibility Made Easy_ Strategies for Inclusive Design.pptx
EmmaJones273085
 
The Importance of Accessibility in Web Design | Website Design Company | Get ...
The Importance of Accessibility in Web Design | Website Design Company | Get ...The Importance of Accessibility in Web Design | Website Design Company | Get ...
The Importance of Accessibility in Web Design | Website Design Company | Get ...
NileshG12
 
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
Ruth Everett
 
Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101' Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101'
Intopia
 
Marketing in the disability services sector
Marketing in the disability services sectorMarketing in the disability services sector
Marketing in the disability services sector
samantha singer
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Whole Brain Group, LLC
 
doumi94
doumi94doumi94
doumi94
doumi94
 
accessibility_101.pdf
accessibility_101.pdfaccessibility_101.pdf
accessibility_101.pdf
donna911404
 
Usability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationUsability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT Foundation
Tonya Thomas
 

Ähnlich wie Top 10 Tips for Making Your Website Accessible (20)

Mobile web design
Mobile web designMobile web design
Mobile web design
 
RBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & RecommendationsRBC Royal Bank : An Accessibility Evaluation & Recommendations
RBC Royal Bank : An Accessibility Evaluation & Recommendations
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
 
Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
Accessibility and why it matters
Accessibility and why it mattersAccessibility and why it matters
Accessibility and why it matters
 
Seth Duffy Accessibility97035
Seth Duffy   Accessibility97035Seth Duffy   Accessibility97035
Seth Duffy Accessibility97035
 
Web Accessibility Audit_ Ensuring Inclusivity Online.pptx
Web Accessibility Audit_ Ensuring Inclusivity Online.pptxWeb Accessibility Audit_ Ensuring Inclusivity Online.pptx
Web Accessibility Audit_ Ensuring Inclusivity Online.pptx
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
Understanding Web Accessibility
Understanding Web AccessibilityUnderstanding Web Accessibility
Understanding Web Accessibility
 
Usability thinking
Usability thinkingUsability thinking
Usability thinking
 
Web Accessibility Made Easy_ Strategies for Inclusive Design.pptx
Web Accessibility Made Easy_ Strategies for Inclusive Design.pptxWeb Accessibility Made Easy_ Strategies for Inclusive Design.pptx
Web Accessibility Made Easy_ Strategies for Inclusive Design.pptx
 
The Importance of Accessibility in Web Design | Website Design Company | Get ...
The Importance of Accessibility in Web Design | Website Design Company | Get ...The Importance of Accessibility in Web Design | Website Design Company | Get ...
The Importance of Accessibility in Web Design | Website Design Company | Get ...
 
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
Why Accessibility is More Than Just a Lighthouse Metric | SEONerdSwitzerland ...
 
Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101' Miles of Accessibility - An 'Accessibility 101'
Miles of Accessibility - An 'Accessibility 101'
 
Marketing in the disability services sector
Marketing in the disability services sectorMarketing in the disability services sector
Marketing in the disability services sector
 
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...Marketing Without Barriers: Considering Digital Accessibility for Customers a...
Marketing Without Barriers: Considering Digital Accessibility for Customers a...
 
doumi94
doumi94doumi94
doumi94
 
accessibility_101.pdf
accessibility_101.pdfaccessibility_101.pdf
accessibility_101.pdf
 
Usability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT FoundationUsability Shmoozability for MCWT Foundation
Usability Shmoozability for MCWT Foundation
 

Mehr von AEL Data

7 Easy Fixes to Make Your Courses Accessible
7 Easy Fixes to Make Your Courses Accessible7 Easy Fixes to Make Your Courses Accessible
7 Easy Fixes to Make Your Courses Accessible
AEL Data
 
Common Forms Accessibility Issues & How to Fix Them
Common Forms Accessibility Issues & How to Fix ThemCommon Forms Accessibility Issues & How to Fix Them
Common Forms Accessibility Issues & How to Fix Them
AEL Data
 
How to Write Alt Text Like a Pro.pdf
How to Write Alt Text Like a Pro.pdfHow to Write Alt Text Like a Pro.pdf
How to Write Alt Text Like a Pro.pdf
AEL Data
 
Design Accessibility Do's & Don'ts
Design Accessibility Do's & Don'tsDesign Accessibility Do's & Don'ts
Design Accessibility Do's & Don'ts
AEL Data
 
5 COMMON Digital Accessibility.pdf
5 COMMON Digital Accessibility.pdf5 COMMON Digital Accessibility.pdf
5 COMMON Digital Accessibility.pdf
AEL Data
 
7 THINGS Every Designer Needs
7 THINGS Every Designer Needs7 THINGS Every Designer Needs
7 THINGS Every Designer Needs
AEL Data
 
How to Create Accessible Math Content
How to Create Accessible Math ContentHow to Create Accessible Math Content
How to Create Accessible Math Content
AEL Data
 
Make Google Docs Accessible
Make Google Docs AccessibleMake Google Docs Accessible
Make Google Docs Accessible
AEL Data
 
Why Skip Accessibility
Why Skip AccessibilityWhy Skip Accessibility
Why Skip Accessibility
AEL Data
 
Hashtag Accessibility
Hashtag AccessibilityHashtag Accessibility
Hashtag Accessibility
AEL Data
 
3 Important Steps For Website’s Accessibility Audit
3 Important Steps For Website’s Accessibility Audit3 Important Steps For Website’s Accessibility Audit
3 Important Steps For Website’s Accessibility Audit
AEL Data
 
7 reasons to make your Digital Presence Accessible
7 reasons to make your Digital Presence Accessible7 reasons to make your Digital Presence Accessible
7 reasons to make your Digital Presence Accessible
AEL Data
 
Accessibility Myths Debunked
Accessibility Myths DebunkedAccessibility Myths Debunked
Accessibility Myths Debunked
AEL Data
 
Web Accessibility Checklist
Web Accessibility ChecklistWeb Accessibility Checklist
Web Accessibility Checklist
AEL Data
 
7 Tips Boost Reach On Your Account Accessibility.pdf
7 Tips Boost Reach On Your Account Accessibility.pdf7 Tips Boost Reach On Your Account Accessibility.pdf
7 Tips Boost Reach On Your Account Accessibility.pdf
AEL Data
 
The Ultimate Guide to Web Accessibility [with free accessibility handbooks]
The Ultimate Guide to Web Accessibility [with free accessibility handbooks]The Ultimate Guide to Web Accessibility [with free accessibility handbooks]
The Ultimate Guide to Web Accessibility [with free accessibility handbooks]
AEL Data
 
5 Most Common Accessibility Mistakes You Might Be Making
5 Most Common Accessibility Mistakes You Might Be Making5 Most Common Accessibility Mistakes You Might Be Making
5 Most Common Accessibility Mistakes You Might Be Making
AEL Data
 

Mehr von AEL Data (17)

7 Easy Fixes to Make Your Courses Accessible
7 Easy Fixes to Make Your Courses Accessible7 Easy Fixes to Make Your Courses Accessible
7 Easy Fixes to Make Your Courses Accessible
 
Common Forms Accessibility Issues & How to Fix Them
Common Forms Accessibility Issues & How to Fix ThemCommon Forms Accessibility Issues & How to Fix Them
Common Forms Accessibility Issues & How to Fix Them
 
How to Write Alt Text Like a Pro.pdf
How to Write Alt Text Like a Pro.pdfHow to Write Alt Text Like a Pro.pdf
How to Write Alt Text Like a Pro.pdf
 
Design Accessibility Do's & Don'ts
Design Accessibility Do's & Don'tsDesign Accessibility Do's & Don'ts
Design Accessibility Do's & Don'ts
 
5 COMMON Digital Accessibility.pdf
5 COMMON Digital Accessibility.pdf5 COMMON Digital Accessibility.pdf
5 COMMON Digital Accessibility.pdf
 
7 THINGS Every Designer Needs
7 THINGS Every Designer Needs7 THINGS Every Designer Needs
7 THINGS Every Designer Needs
 
How to Create Accessible Math Content
How to Create Accessible Math ContentHow to Create Accessible Math Content
How to Create Accessible Math Content
 
Make Google Docs Accessible
Make Google Docs AccessibleMake Google Docs Accessible
Make Google Docs Accessible
 
Why Skip Accessibility
Why Skip AccessibilityWhy Skip Accessibility
Why Skip Accessibility
 
Hashtag Accessibility
Hashtag AccessibilityHashtag Accessibility
Hashtag Accessibility
 
3 Important Steps For Website’s Accessibility Audit
3 Important Steps For Website’s Accessibility Audit3 Important Steps For Website’s Accessibility Audit
3 Important Steps For Website’s Accessibility Audit
 
7 reasons to make your Digital Presence Accessible
7 reasons to make your Digital Presence Accessible7 reasons to make your Digital Presence Accessible
7 reasons to make your Digital Presence Accessible
 
Accessibility Myths Debunked
Accessibility Myths DebunkedAccessibility Myths Debunked
Accessibility Myths Debunked
 
Web Accessibility Checklist
Web Accessibility ChecklistWeb Accessibility Checklist
Web Accessibility Checklist
 
7 Tips Boost Reach On Your Account Accessibility.pdf
7 Tips Boost Reach On Your Account Accessibility.pdf7 Tips Boost Reach On Your Account Accessibility.pdf
7 Tips Boost Reach On Your Account Accessibility.pdf
 
The Ultimate Guide to Web Accessibility [with free accessibility handbooks]
The Ultimate Guide to Web Accessibility [with free accessibility handbooks]The Ultimate Guide to Web Accessibility [with free accessibility handbooks]
The Ultimate Guide to Web Accessibility [with free accessibility handbooks]
 
5 Most Common Accessibility Mistakes You Might Be Making
5 Most Common Accessibility Mistakes You Might Be Making5 Most Common Accessibility Mistakes You Might Be Making
5 Most Common Accessibility Mistakes You Might Be Making
 

Kürzlich hochgeladen

TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
Federico Razzoli
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
fredae14
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 

Kürzlich hochgeladen (20)

TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
Webinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data WarehouseWebinar: Designing a schema for a Data Warehouse
Webinar: Designing a schema for a Data Warehouse
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Recommendation System using RAG Architecture
Recommendation System using RAG ArchitectureRecommendation System using RAG Architecture
Recommendation System using RAG Architecture
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 

Top 10 Tips for Making Your Website Accessible

  • 1. Top 10 Tips for Making Your Website Accessible Accessibility isn’t just about accommodating people with disabilities. It’s all about making the Internet accessible and free to everyone. 98% percent of websites are not completely accessible from a legal standpoint and this is just from the U.S. This is bad news considering that everything from ordering pizza to voting news is now done online. Therefore, web accessibility is an essential part of the digital world and it benefits everyone. Before we jump into the main topic, let us cover the basics first.
  • 2. What is Web Accessibility? Web accessibility is the practice of removing barriers that prevent users from accessing your website. In a nutshell, it is making your website available to everyone. Web accessibility involves all disabilities that affect access the web, including: ● Auditory ● Cognitive ● Neurological ● Physical ● Speech ● Visual It also benefits people without disabilities such as people: ● Using devices of different screen sizes and OS such as mobile phones, smartwatches, smart TVs, etc. ● With changing abilities because of old age ● With situational limitations such as bright sunlight where visibility is low or a crowded atmosphere where they can’t listen to audio ● With slow or unstable internet connection Making your website accessible is a vital step, so reading through a business case for accessibility will help you learn more about it and the benefits it may provide for your organization. Now let us dive deep into a few tips to help you make your website accessible.
  • 3. Top 10 Tips To Help You Make Your Website Accessible 1. Selecting the Right CMS The advent of technology has provided us with many Content Management Systems (CMS) such as WordPress, Joomla, etc. WordPress is one of the most popular CMS in the mix and the good news is that it is well-equipped to handle accessibility. However, other CMS like Joomla and Drupal, are also doing a great job when it comes to accessibility. After you zero in on a CMS that meets all your website requirements, the next step is to choose a theme or design that is accessible. To learn more about the accessibility features and tips in the theme or design, refer to the documentation on theme and decide your layout and content. Make sure you stick to the same rules when choosing modules, plugins, or widgets. Take steps to ensure that editing toolbars and video players offer support while creating accessible content. For example, headers and accessible tables should be available in editing toolbars and closed captioning should be available in video players. Lastly, check out the options that are provided in the CMS admin menu (for example: publish blog post) are accessible. 2. Maintaining Heading Hierarchy Always focus on readability when writing for a large audience. Make sure that the text is simple and has a good flow so as to not confuse users. Maintain the heading hierarchy (H1 to H6) as screen reader users depend on them to navigate the web page. Jumping the heading levels will not convey the information to users as intended by the author. Lastly, don’t use stylish fonts as they are difficult to read and understand for people with low vision. 3. Using Alt-Text for Images Alt-text is short for the alternative text that is provided for images, it helps in conveying the information in the images to users with visual impairments. Search engine robots, web crawlers, etc. do not read images and instead rely on alt text to understand the images. Therefore having alt-text will also help in improving your SEO score. However, care should be taken to exclude alt text from images that are used only as decoration. In such cases, the alt text should be kept “” and screen readers will understand that it is a decorative image and move on to the next content.
  • 4. 4. Providing Descriptive Links Visually impaired people use their screen readers to scan the website for links. It is impossible for screen reader users to understand the context of links with respect to the rest of the page. For example, if you plan on guiding users to the “About Us” page: Avoid saying: “Click here to know more.” Instead, try saying: “To learn more about our company, read About Us.” This helps users to understand the destination of the link without the trouble of going through the web page to understand the context. 5. Maintaining Color and Contrast People with color blindness will have a lot of difficulties if the information or response required is only dependent on the color. Therefore avoid using only color as a means to convey information to users and provide alternate ways to access that content. Here is a free chrome extension that simulates information a color-blind person receives and/or adds a daltonization filter. Check it out to get a brief idea on how users with color blindness view websites. 6. Using Accessible Forms Forms should follow the same contrast ratio as explained in the color and contrast category. Avoid using the placeholder text must be always avoided wherever possible. Labels and hints should be used outside the boxes for easy understanding. Autofill should also be enabled for faster filling up of forms which will also help people without disabilities. Finally, avoid using CAPTCHA as it is difficult for users with visual and cognitive impairments to access it. Furthermore, it should also not be used to validate any submissions. 7. Using Tables in Accessible Format Avoid using tables as the only means of communicating information to users as it discourages people with blindness and visual impairment from checking your content.
  • 5. Add them only if they are absolutely necessary and make sure that they follow accessibility standards for tables. 8. Having a Keyboard-Friendly Website What if you used only a keyboard to navigate the web for a whole day? In 2018, a BBC news reporter did exactly that and had a compelling case study to report. Let us first understand who uses only the keyboard to navigate. We can broadly classify them into three categories: ● Mobility-impaired users who have difficulties using a mouse ● Vision-impaired users who can’t distinguish clickable elements in the web page ● Users who are more comfortable and prefer using a keyboard over the mouse Here are some tips to ensure your website is keyboard-friendly: ● Web pages with a lot of content should be broken up with anchor links that assist users to navigate to their desired part of the web page and skip content that is not useful to them. ● Provide the “Skip to main content” option at the top of each page so that users can directly land on the main content using the keyboard. ● Avoid using elements that can only be activated when you hover the mouse over them as keyboard and screen reader users can’t access them. ● Keyboard users use the tab key to navigate web pages, therefore the tab order should match the visual order so as to not confuse users. 9. Following Rules for ARIA Labels Usage Accessible Rich Internet Applications (ARIA) is an acronym for Accessible Rich Internet Applications. The ARIA principles describe how to make a website accessible to persons who use assistive technology. Here are some examples of using the ARIA label in the right way:
  • 6. ● Adding alerts or notifications to screen reader users to notify them of dynamic page changes like stock tickers and search filters. ● Providing screen reader users with access to complicated, interactive widgets like date pickers. 10. Making your Dynamic Content Accessible Sometimes, websites have content that automatically updates and that might not be noticed by screen reader users. Here are some examples: ● Screen overlays ● Lightboxes ● In-page updates ● Modal dialogs This content should also be made accessible to users as it is an integral part of a website. Make sure that video players should not automatically play videos as it might cause panic to visually impaired users as they did not activate them. Furthermore, closed captions and transcripts should be available for all videos as it helps users with auditory impairments. Wrapping up Imagine you are in a crowded place and you receive a video link on Facebook from your friend. It will be a herculean task for you to understand that video, but if it has captions, you can easily view the video on mute and enjoy the video. Transcripts and closed captions give an easy workaround for watching multimedia irrespective of the environment that you are in. One of the internet’s core ideals is freedom, and accessibility is one of the most effective instruments for achieving that aim. Now is your chance to make a difference and participate actively in this noble path of making the web accessible to everyone.