Front-End Developer
Responsibilities Mapping
This is an in-progress draft. We welcome comments via GitHub or email from the links below.
Role summary
Front end development typically builds the parts of a product that will be interacted with by the user - specifically, the user interface. For the purpose of this resource, front end development refers to the implementation or codification of the design in functional templates for a product using technologies such as HTML, CSS and JavaScript.
Key Deliverables
- HTML and CSS files
- Client-side scripting
- JavaScript libraries and frameworks
- Etc.
Tasks include
- Pattern libraries and prototypes
- Template functionalities
- Semantically-rich HTML document structures and widgets
- Use and adapt frameworks and content management systems
- Etc.
Example job titles for this role
Front End Developer, Web Developer, Full-Stack Developer, UI/UX Developer, JavaScript Developer, UI/UX Engineer
Front-End Development Tasks – Starter List
Here is a list of tasks for front-end developers and engineers to get started. If these tasks aren’t met, your code can cause significant barriers to users.
This list is taken from the full list of Front-end Development tasks.
For all role tasks, see the [Tasks Full List].
| ID | WCAG SC | Level | Task | Main Role | Primary Ownership | Secondary Ownership | Contributor |
|---|---|---|---|---|---|---|---|
| IMG-020 | 1.4.5 | AA | Text that is placed on top of an image is handled semantically through HTML and CSS instead. | Development | Front-End Development | UX Design | none |
| SEM-002 | 1.3.1 | A | HTML elements are used according to the HTML specification. | Development | Front-End Development | UX Design | none |
| SEM-008 | 1.3.1 | A | HTML elements are used based on the semantics they provide, not based on what they look like. | Development | Front-End Development | UX Design | none |
| SEM-011 | 1.3.1 | A | Elements that act as headings are marked up as such. | Development | Front-End Development | UX Design | none |
| SEM-017 | 1.3.2 | A | The source code (or DOM) order matches the suggested visual order of the design. | Development | Front-End Development | UX Design | none |
| INP-004 | 2.1.1 | A | All actionable elements can be reached, using only the keyboard. | Development | Front-End Development | UX Design | none |
| INP-005 | 2.1.1 | A | All active elements can be triggered, using only the keyboard. | Development | Front-End Development | UX Design | none |
| INP-012 | 2.1.2 | A | Users can navigate away from all active elements, using only the keyboard. | Development | Front-End Development | none | none |
| INP-015 | 2.4.3 | A | Users can tab through active elements in an order that reflects the intended interaction order of the design. | Development | Front-End Development | UX Design Visual Design | none |
| INP-018 | 2.4.7 | AA | Every element that receives keyboard focus displays a visible focus indicator. | Development | Front-End Development | Visual Design | none |
| FRM-001 | 1.3.1 | A | Text labels are marked up using the label element or other equivalent means. | Development | Front-End Development | none | none |
| FRM-007 | 1.3.1 | A | Instructions and messages are programmatically conveyed to assistive technologies. | Development | Front-End Development | UX Design | none |
| FRM-009 | 1.3.1 | A | Required fields are programmatically conveyed as such to assistive technologies. | Development | Front-End Development | UX Design | none |
| CSS-014 | 1.4.4 | AA | CSS techniques are used to ensure that content doesn't overflow, overlap or get truncated as a result of increasing the text size. | Development | Front-End Development | Visual Design | UX Design |
| NAV-012 | 2.4.1 | A | Skip links and similar mechanisms point to the expected destination. | Development | Front-End Development | UX Design | none |
Case Study: How to use the Starter List
A good way to get familiar with the tasks is to do a short case study. Think about how you might tackle the task in your role.
Then, think of how meeting this task impacts an end user.
Task:
INP-004: All actionable elements can be reached, using only the keyboard.
Primary Role: Front-end Developer
As a front-end developer, I will code all functionality of the content, on a web page and/or within individual components and elements, to ensure it is operable through a keyboard interface only. This also allows switch control systems to operate.
Secondary Role: UX Designer
As the UX designer in support of the Front-end Developer, I will ensure to annotate my designs, wireframes and prototypes to clearly define the functionality of components on the page and the expected reading order to allow a keyboard user access to the page content.
End User persona 1: Kaseem, teenager who is deaf and blind
Kaseem is a teenager who is deaf and recently became legally blind too, which means she can see only small portions of a screen and read text when it is significantly enlarged. She uses screen magnification software to enlarge the text on websites to a suitable font size, displays text on a refreshable Braille device and a large computer screen with high resolution and high luminosity (brightness).
The viewport, or area that Kaseem sees when the screen is magnified, is very small. So the focus must be in or very close to that ‘viewport’ at all times. Shifting it unexpectedly to a completely different areas of the screen makes it very difficult to find and then move to that area, especially if she has no idea where the focus has landed. The focus could move to another area on the page, or to a completely new page.
End user persona 2: Alex, reporter with repetitive stress injury
Alex has worked as a reporter for more than 20 years and has developed a repetitive strain injury that makes it painful to use a mouse and to type for extended periods of time. Alex encounters problems when websites and other online content cannot be navigated by keyboard commands alone.
If when navigating the web page, if the keyboard focus shifts unexpectedly, can Alex get back to the task he was doing?
End user persona 3: Ilya, senior staff member who is blind
Ilya is blind. She is the chief accountant at an insurance company that uses web-based documents and forms over a corporate intranet and like many other blind computer users, she does not read Braille.
Ilya relies on the screen reader assistive technology to let her know where she is on the web page. Moving the focus unexpectedly breaks the context of the page and her mental map or perception of the page.
Resources
- Use the WAI Tips for Developing to get started.
- See the WAI Tutorials for menus, tables, forms and more.
- Review the WAI-ARIA Authoring Practices Guide (APG) for keyboard functionality for ARIA components.