Accessibility Framework
Web accessibility fulfills the basic promise of the web - making information and communication readily available to all people regardless of barriers in geography, language, or disability. An accessibility framework provides a means to integrate the work of accessibility into each phase of a project, from planning to design to validation, so as to ensure that the accessibility of a product is visible, methodical, and accountable.
Methodology
Accessibility Process
The accessibility framework exists as part of the overall product development process.
1. Plan
The plan phase is when I define the conformance standard for the product. Remove criteria that is not relevant to the scope of the product. Write accessibility requirements for product. This is done while the product is the define stage or product development.
2. Design
The Accessibility Design phase is where I start designing in the accessibility requirements. This is done in a progressive manner as the fidelity of the design is progresses from sketch to mockup. When the design is ready for handoff, accessibility annotations are created.
3. Implementation
During implementation of the designs, a combination of automated and manual checks are done throughout development ensuring the accessibility requirements are met.
4. Validation
Accessibility validation verifies that the accessibility requirements for the project were met. Report findings and remediate any issues found. This stage is repeated throughout the lifespan of the product.
5. Monitor
Th monitor phase is where the accessibility of the product is continuously monitor against changes any changes to it. Testing should be conducted to identify and evaluate issues that may emerge.
Progressive Completion
Each Success Criteria that I plan to meet during this process has a specific action associated with it at each phase. The workload of creating an accessible experiences is spread evenly throughout as much as possible. This helps ensure that there aren’t any holes in accessibility in the final product and that there are less blockers that might hold progress up. Not building in accessibility checks this way will assuredly be very costly and time consuming at the back end of the project.
Design Categorization
The accessibility standard I use as in this framework is WCAG 2.2, the newest standard published in October 2023 which has 87 total success criteria, 26 more than 2.0. I do have my own categorization of those standards however. WCAG is categorized by its principles:
Perceivable
Operable
Understandable
Robust
This categorized is good for creating criteria that meet core accessibility needs but they are not easily worked with when it comes to designing, building, and testing.
Categories
I re-categorized how I work with the success criteria to make designing and validating them in the product more straightforward and easy to track and work with. Most to all success criteria have more than one angle and purpose to them that make them apply to several aspects of the page. For example, 1.3.1 Info and Relationships (Level A)(opens in new tab) is one of the most fundamental criteria to meet for an accessible experience, but it applies to headings, data tables, lists, forms, and other semantic elements of the page. It can be difficult to pinpoint all the areas where you need to consider or check for it in a design.
The existing organization 1.3.1 exists under, is the Perceivable principle and Adaptable guideline, organizations that exists to guide the implementation of criteria into WCAG itself. These organization, however, are relatively difficult to navigate how and when to design, build, or validate 1.3.1 for an accessible experience. My approach to re-categorization is to group the success criteria in ways they have similar working contexts to one another. The goal is to create design and validation facing groupings for criteria that makes using them more straightforward and reducible.
Layout Design
Layout Design encompasses success criteria that are associated with site-wide navigation, within-page navigation, and adaptive and responsive content. This category is useful early on in the design process when determine layout structure and information architecture.
Site-Wide Navigation (5 Criteria)
Within-Page Navigation (4 Criteria)
Adaptive and Responsive Content. (5 Criteria)
Text-Content Design
Text-Content design encompasses success criteria that are associated with designing accessible real text and programmatic text. This category can be defined as late as the mockup design, as they don’t involve drastic change to the overall design. The criteria focus on the text-content itself for all elements and text on the page.
Programmatic Text (5 Criteria)
Real Text (5 Criteria)
Media Design
Media design encompasses success criteria that are associated with pre-recorded media, live media, and timed-content management. This category is the most useful, because if you don’t have media then you can eliminate the entire category from needed criteria at the beginning.
Pre-Recorded Media (7 Criteria)
Live Media (2 Criteria)
Timed-Content Management (11 Criteria)
Input Design
The input design phase is the largest category. It encompasses success criteria for different input modalities, inputs that cause context changes, and Input assistance (primarily for forms). This category should be considered before a design reaches the mockup stage.
Input Modalities (12 Criteria)
Context Changes (7 Criteria)
Input Assistance (11 Criteria)
Markup Design
Markup Design encompasses success criteria that relate to the validity, soundness, and semantics of the markup used in development of the product. Much of this only relates to developers, but much of it also relies on designers communicating the semantics and context that the markup is supposed to express.
Markup Validity (1 Criteria)
Markup Soundness (1 Criteria)
Markup Semantics (1 Criteria)
Visual Content Design
EXAMPLE
Visual content design encompasses success criteria that are associated with creating accessible solutions for the visual aspects of the page, specifically programmatic visual content and color and contrast. As the category suggest, it can be defined for the product at the mockup stage.
Programmatic Visual Content (5 Criteria)
Color Contrast (5 Criteria)
1. Plan
The Accessibility plan phase is when I define the conformance standard for the product. Remove criteria that is not relevant to the scope of the product. Write accessibility requirements for product. This is done while the product is the define stage or product development.
Tasks
Define Conformance Level and Relevant Criteria
Deliverables
Accessibility Planning Checklist
Define Conformance Level and Relevant Criteria
Define Conformance Standard
The Define phase of the product development process is the first time where I start making decisions regarding accessibility. The first and largest decision that can be made choose the conformance level the product requires, Level A, AA, AAA. Although, there levels have a few differences between them, the levels are primarily distinctions in difficulty to meeting them.
Level A
Level A is a base level of conformance. In most cases, this wouldn’t be sufficient as it does not meet most to all external standards for conformance (Like Section 508). In very specialized environments where accessibility is not a primary concern, it may be appropriate to provide only Level A conformance.
Level AA
Level AA is the de-facto standard for most accessibility efforts. It meets many external standards that would be required of the product. I’d like to think it also represent a good balance between feasibility for most organizations and comprehensiveness to accessibility needs.
Level AAA
Level AAA is the top level of conformance. It has a broad reach for solutions but is also much more difficult to meet in some aspects. Organizations with a mature accessibility program should consider this level.
Accessibility Planning Checklist
On top or choosing a conformance level it may be also useful to filter out or include specific criteria according to the product means. This may have effects on which conformance level you can claim, but it may be necessary in certain situations. Below, I've created a list of all the criteria that can be considered at this stage of the process. (excerpt below)
2. Design
The Accessibility Design phase is where I start designing in the accessibility requirements. This is done in a progressive manner as the fidelity of the design is progresses from sketch to mockup. When the design is ready for handoff, accessibility annotations are created.
Tasks
Accessibility Design
Deliverables
Accessibility Design Checklist
Annotations
Accessiblity Design
Low Fidelity
During the sketch and wireframe stage of the design, I am careful to only consider certain aspects of accessibility. I don’t want to waste time defining programmatic text when I am sketching or define contrast of elements while I am wire framing.
What I do consider at this stage is layout accessibility. The design must start out with the ability to handle different orientations and window sizes. It must be consistent in its navigation schemes. If you don’t consider these aspects of the design near the beginning they might cause unintended reverse engineering in the future.
Once the wires have been tested and validated, accessibility solutions for text-content and input design can be included, depending on the circumstance
High Fidelity
Before the creation of mockups, much of the accessibility requirements can be defined. Ideally, what I’d want to be considering at the point of high fidelity design would only be visual design accessibility.
-
1.4.11 Non-Text Contrast (Level AA) - WCAG 2.1
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components, Graphical Objects
-
2.4.13 Focus Appearance (Level AAA) - WCAG 2.2
When the keyboard focus indicator is visible, an area of the focus indicator meets all the following: is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
Accessibility Design Annotations
Once the accessibility design is complete, it must be annotated and prepared for handoff to the development team. This can be a long process if not gradually added to during the design phase.
EXCERPTS - EARLY ITERATION
3. Implementation
During implementation of the designs, a combination of automated and manual checks are done throughout development ensuring the accessibility requirements are met.
Tasks
Accessibility Implementation Checks
Deliverables
Accessibility Implementation Checklist
Accessibility Implementation Checks
Implementation
The implementation phase may be very organization dependent as far as how the accessibility requirements are operated on during development. In general, progress toward the accessibility goals will be tracked like other areas are tracked, through epics, stories, and tasks. Additionally, development should take advantage of routine automated checks and intermittent rounds of manual checks throughout the process as well.
4. Validation
Accessibility validation verifies that the accessibility requirements for the project were met. Report findings and remediate any issues found. This step should be relatively quick in comparison to validation efforts that did not integrate accessibility checks throughout the overall process.
Tasks
Accessibility Validation
Deliverables
Accessibility Report
Remediation Prioritization
Accessibility Validation
Accessibility validation involves testing, reporting on, and remediating all accessibility errors and concerns that exist in the product. This validation is conducted as a final step in this framework before the product is released. In order to do it effectively, it is important that methodology of identifying, testing, and fixing any errors be made specific.
Validation Testing
Validation testing is dependent on many factors. For it to be done effective, you must know what you want to test, how you are going to test it, and what information you need to communicate with the test for it to be actionable. In general, a testing methodology involves:
Determine the Scope for Testing: Define what parts of product should be prioritized and de-prioritized. A testing effort can be extremely time-consuming if the scope is not defined up front.
Testing Methods: Testing for each success criteria requires understanding of what testing methods should be used for validation.
Issue Documentation: The issues that are found need to be fully communicated for them to be remediated effectively.
TEMPLATE - EXCERPT
Accessibility Report
The accessibility report represents the state of accessibility for the product and is a deliverable that will continuously updates and tracked through the lifespan of the product. Accessibility is measured in two ways, conformance and user impact. Both measurements provide a broad understand of the state of accessibility of the product:
Conformance: Conformance is simple description of how many of the WCAG success criteria does the product meet. Conformance is useful in understanding the number and kind of errors in between the current state and fully accessible product.
User Impact: User Impact measures the degree to which the user will be affected by the issues found in testing. Some issues represent minor impediments to the users while other issues represent complete blockers to using the page. The user impact scale is extrapolated from the impact scale of individual errors and I am confident that it respects the promise of the WCAG guidelines.
TEMPLATE - EXCERPT
Remediation Prioritization
After the testings is complete, the last step of the validation stage is the remediating the found issues on the page. With properly documented issues, this should be straightforward. The only question is how to prioritize what issues to be corrected first. The priority can be decided on a case by case basis, but in general, issues should be sorted by user impact, time to remediate, and business priority first so as to fix the most severe, available, and important issues first.
TEMPLATE - EXCERPT
5. Monitor
Th monitor phase is where the accessibility of the product is continuously monitor against changes any changes to it. Testing should be conducted to identify and evaluate issues that may emerge.
Tasks
Accessibility Monitoring
Accessibility Monitoring
The Accessibility Report is a living document that monitors the state of accessibility for the product. At intervals after launch, a change log must be kept of all the work done, and the validation stage of this framework must be repeated to reestablish a current accessibility report. This maintenance phase underscores the need for a complete validation effort as, it will become more important to scope the validation work correctly so that time and effort isn’t wasted assessing parts of product that have not changed.
Conclusion
[TBD]