An Introduction to Web Accessiblity
Over 7 million people globally (about twice the population of Oklahoma) use a screen reader to make accessing the web possible. Whithout certain functionalities coded into a web page an accessiblity tool like a screen reader would be rendered useless. Web accessiblity is about making the web accessible to everyone irregardless of ability or disability.
Why Should You Care About Web Accessiblity?
Web accessibility is not only intended to make the web accessible to people with disabilities it is for everyone, from a user who prefers using only a keyboard because it is more efficient for them, to users who are blind, deaf, have memory issues, etc. Accessibility matters for everyone. The web enables us to do and learn amazing things, and everyone should have equal access to those opportunities. By designing with accessibility in mind, we can create a more inclusive and equitable online experience for every user which means more people get to hear what you have to say
What are common challenges for users?
There are many people who live with low vision issues like Cataracts, Macular degeneration, Glaucoma, even color blindness can be an issue when it comes to interacting with a web page. Low vision issues like these make issues with like low contrast ratio even worse and can render text unreadable, which would mean some users are not getting the same experience as someone else who does not experience any vision issues. The same goes for users with disabilities like an amputation, hard of hearing, developmental disorders, and neurodivergence, all of these disabilities can make interacting with a web page challenging.
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is a set of standards that was designed to make the web more accessible to web users with disabilities. The WCAG standard is published by the W3C (World Wide Web Consortium) and WAI (Web Accessibility Initiative).
History of WCAG
The WCAG standard 1.0 was created in 1999, it included 14 guidelines that had 10 checkpoints for each guideline. This version 1.0 the included levels of conformance (A, AA, AAA) and each of these levels had different guidelines to be met for compliance. In 2008 WCAG 2.0 was released which broadened and redefined the scope of previous guidelines to account for rapidly growing technology. Additionally, version 2.0 introduced the four guideing principles of accessibility know as the POUR principles. WCAG 2.1 was released a decade later in 2018, which made several additions to it to version 2.0.
In 2023 WCAG 2.2 was released with 9 additional success criteria and guidelines to further improve web accessibility, mostly focused on cognitive disabilities, mobile accessibility, and low vision needs.
On April 24, 2026 compliance with WCAG 2.1 AA standards will required for all large public entities(serving 50,00 or more peoples), and by April 26th, 2027 for small entities (serving fewer than 50,000 people) according to section 508 for state and local governments.
Levels of Conformance
- Level A
- These account for basic accessibility needs.
- Level AA
- under WCAG 2.1 AA is the minimum required conformance level. This level includes all level A conformance criteria as well as additional criteria.
- Level AAA
- This is the current highest level of conformance, includes all level A and level AA conformance as well as additional criteria.
Guidelines and Success Criteria
Under the WCAG 2.1 standard and the four principles of accessibility are 13 guidelines that provide basic goals that as developers we should be working towards meeting. When these guidelines are met it ensures a more accessible web page for users with disabilities. However, these guidelines are not testable, They are more of a set of objectives or a framwork. That is where the success criteria comes in. For each guideline there are success criteria that are provided for a testable criteria to the guidelines. Each success criteria is assigned to a level of conformance based on a few factors: how essential it is, how possible it is for all websites and types of content to meet it, and how reasonable the skill level required is.
What are POUR Principles
The POUR principles are the four guideing principles set out by the WCAG accessibility standard.
The P in the POUR acronym stands for percievable, meaning that a user needs to be able to percieve the content in your page through at least one of thier senses (sight, sound, or touch). There are many accessibility tools that enable users to interact with the web, and as developers we are responsible for making our webpages accessible to be used with an accessibility tool.
Example Problems
- Low contrast elements
- Images
- Audio content
Potential Solutions
- Ensure the contrast of text and graphical elements meets WCAG contrast ratio requirements.
- Provide descriptive alternative text for all images and graphics.
- Provide captioning for all audio elements present on the page.
The O in the POUR acronym stands for operable. All interactive elements on a web page need to be accessible to multiple different tools not just a keyboard and mouse.
Example Problems
- A user with a screen reader is never able to get to the main content
- An accordion element is unaccessible
Potential Solutions
- Add a "skip to Main" button
- Ensure elements like accordions and tab structures a tab accessible
The U in the POUR acronym stands for Understandable. The content within a page should be Understandable for a large audience of users. The user must be able to easily understand how the website functions, and be able to know where they are on the page.
Example Problems
- A user does not know what an acronym means
- A user with a learning disability has a dificult time focusing and understanding
- A user uses an in page link and is unable to easily return or see what area of the page they are on
Potential Solutions
- Always explain and industry specific terms or acronyms
- Keep reading level around 8th or 9th grade reading level, and provide summaries of complicated or long topics
- Make it clear on every page where the user is located.
The R in the POUR acronym stands for robust, this means that the web page should be compatable and usable with assistive technology, different browsers, previous versions of browsers, different operating systems, and different types of devices like tablets and mobile phones.
Example Problems
- An elderly user on an older pc and outdate internet browser is unable to use a web page
- A user on an iphone has a difficult time trying to read the content on a page
Potential Solutions
- Ensure that the function and structures of your page are not dependent on newer technology that is not backward compatable.
- Refrain form using fixed sizing for elements, and set styles for different viewports
Accessiblity Testing Tools
These are just a few tools that can be used to check accessibility conformance during development.
Chrome Developer Tools
This tool is natively a part the chrome web browser and can be open by pressing f12.
WebAIM Contrast Checker
This is an excellent tool for ensuring the colors you plan to use meet minimum contrast requirements
WebAIM Contrast Checker
Siteimprove
This web extension tool scans webpages for accessibility issues and shows how your page looks to a color blind person.
Siteimprove
WAVE Evaluation Tool
This is another tool that will scan a web page for accessibility issues as well as show you a summary breakdown of the elements present on the page.
Wave Evaluation Tool
Axe Developer Tools
Once this extension tool is added to chrome it integrates with the native chrome dev tool to provide a more extesive scan of the page.
Axe Developer Tool
NVDA Screen Reader
This tool is a screen reader that should be used by developers to ensure thier web pages a usable with a screen reader.
NVDA Screen Reader
About Me
Ash Burks
I am a Web Developer at the University of Florida Information Technology.
My responsibility is to create and maintain accessible and user-friendly web applications.
As standards and best practices evolve, I strive to keep our web presence up-to-date and inclusive.
I started this project when I was an intern, and it was a valuable learning experience. Now as a Web Developer, I continue to build on that foundation, and contribute to this site and keep it up to date.
Education
Santa Fe College
A.S Programming and Analysis
Professional Interests
- I am always learning new technologies and improving my skills.
- Ensuring the web is accessible to all users.
- Honing and refining my skills and knowledge.
Hobbies
- Reading & Gaming
- Ceramics
- Hiking