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 accessiblity tools like screen readers woudl be rendered useless. Web accessiblity is about making the web accessible to everyone no matter of ability or disability.
Why Should You Care About Web Accessiblity?
Web accessibility is not only intended to help people with disabilities it is for everyone, from a user that prefers using a keyboard because it is more efficient for them to users who are blind, deaf, have memory issues, and other disabilities. The bottom line is accessibility matters for everyone. Of course there is the fact that there are legal consequences for not meeting these accessibility standards, which is important, however I think instead the focus should be on ensuring that everyone can have the same experience when accessing a web page.
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 pages. Low vision issues like these would make such things like a low contrast ratio even worse, which would mean they are not getting the same experience as someone who does not experience any or even minor vision issues. The same goes for users with amputations, hard of hearing, developmental disorders, and neurodivergence, all of these disabilities can make interacting with a web page challenging.
What is WCAG?
The 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 included 10 checkpoints for each guideline. This first version included levels of conformance as well as guidelines like ones that required text alternatives. In 2008 WCAG 2.0 was released which broadened and redefined the scope of previous guidelines to account for rapidly growing technology. 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. Version 2.1 made several additions to it to version 2.0.
Levels of Conformance
- Level A
- The minimum level of conformance, accounts for basic accessibility needs.
- Level AA
- This higher level includes all level A conformance criteria as well as additional criteria for more inclusive accessibility needs.
- 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
Here is a little bit about me and my goals as a web developer.
Ash Burks
I am a Florida based web developer and programmer.
My current position is as a web assistant at the University of Florida Information Technology.
I hope to develop a signature style of aesthetic and accessible websites that combine unique artistic flair and a mindfullnes for all users.
Education
Santa Fe College
A.S Programming and Analysis
Expected Graduation: 2025
Professional Interests
- I am learning some simple animation skills like GLSL (OpenGL Shading language)
- I am learning several JavaScript libraries
- I am very interested in various game design aspects
Hobbies
- Reading Fantasy novels
- Sculpting
- Hiking