Design for web

Chapter 6: Inclusive design

illustration of a design workflow, with design/test/prototype/iteration stages

A designer is responsible for the work they put into the world. Design is a discipline of action. You are responsible for what you put into the world.

Mike Monteiro, A Designer’s Code of Ethics

In its essence, design is powerful and can have a huge impact. As designers it is our job to do right by the people our work is for, to consider the individuals above all. In his article ‘A Designer’s Code of Ethics’, Mike Monteiro outlines the various aspects of how our work will ultimately affect people and society. The quality of our design work is a direct outcome of our work ethic.

How do we approach our design work? What are the principles we follow when we create and put our web designs online? Are we merely doing work to pay the bills? Do we care about people? Are we striving to make our work the best it can be, deliver the site's content to everyone equally? ~ These are some of the questions we have to ask ourselves as we publish online content.

Inclusive design is essentially what design should be, in my humble opinion anyway. It means making sure that those who the design has been created for can use it easily and that it will deliver on its promise. If we design a tea pot, the only outcome has to be that the container can carry the hot liquid inside, is easy to handle and will allow the tea to be poured without spilling. The added bonus will be if it is aesthetically pleasing, nice to the touch and a pleasure to use.

If we consider then what inclusive web design is, the conclusion must be that it is design for the web that has to be accessible: accessible inclusively to all people, accessible in turn to their chosen devices as well as apps and accessible on connections of varying speeds. We should aim to design our sites with refined typesetting, clear layouts and easy-to-use interfaces to ensure access for all.

The beauty of design work is that there is always an objective, always a target group and a mission. It is work that is people-orientated ~ both when it comes to the work itself via the team work and collaboration involved, and importantly the measure of its success on the feedback from the people it has been created for.

Inclusive design means...

... user-centred design.

illustration of a map with figures, surrounded by speechbubbles and circles.

The most successful web designs are the ones which focus on a user-centred approach. This view will guide the entire design process, from brain storming to the final decision making. People are directly involved in all aspects to give input, feedback and constructive criticism. As designers, we will listen and learn from reactions to and interaction with our work.

We might think that we have come up with the ideal design solution, a clever and unique angle to a design. And this might be the case ~ or not. Without user testing, asking for direct feedback and input from people, we cannot know. Our view would remain purely subjective, lack substance and could be entirely wrong. The objective judgement of the end user, the people who will use our design, is what is required to make sure that our designs deliver.

User-centred design is based on the understanding of the target group specifically, their needs and demands, their priorities, and their individual experiences. It will encourage empathy and understanding during all stages of the project in hand. The work follows an iterative approach: designs are tested and reviewed, refined and iterated, and improved based on direct feedback, insights, reactions and input. User-centred design may use empirical data and evidence gathered through user research[1] and usability testing[2] to inform design decisions.

... accessibility for all.

illustration of a map with figures, surrounded by speechbubbles and circles.

A good website will be design for everyone, regardless of their abilities or their choice of device or software. Creating an accessible site starts with good content which is well structured, clearly written and presented. The design will ensure that colour contrast is sufficient for a good reading experience for all, including those with low vision. The layout will establish a clear visual hierarchy to aid skim reading and navigation. Any media included will offer alternatives which can be accessed by those unable to view or hear it. The code itself will ensure that assistive technologies, such as screen readers for example, will be able to access the content easily.

The web's original mission was to be for everyone, to be a medium that offers freedom of speech, freedom to publish to a wide audience and the freedom to access information easily. So when we publish online, it is our aim to respect this mission ~ to be inclusive in our approach and consider the individuals who access the content we present. Legally, sites for the general public are obliged to follow the guidelines of the W3C [3] which specifies certain requirements to ensure that disabled people will be granted the same access as everyone. Ethically speaking however, as designers we should do the same regardless.

... a good user experience.

illustration of a map with figures, surrounded by speechbubbles and circles.

User experience takes the user-centred approach and accessibility one step further to focus on the overall experience that someone has while interacting with our website. It includes all aspects of interaction, including visual design, ease of use, interactivity, and the overall satisfaction and effectiveness of the design. Our sites should be intuitive, user-friendly, and enjoyable to use. It involves understanding the needs, goals, and preferences of our users and designing the website in a way that meets those needs effectively.

A good user experience means accessible design and code and a website with intuitive and easy-to-use navigation, well-structured content, and straightforward interactions with effective feedback. All means of access are considered as well as tested, building on the results of user research, studies of the user journey and usability testing.

footnotes

  1. ‘User research’ in web design is a systematic and investigative approach to understanding the users of a website. It involves various methods and techniques to collect qualitative and quantitative data about the users and their interactions with the web interface. It is the study of user behaviours, needs, motivations, preferences, and goals to inform the design decisions and create user-centered experiences.
  2. ‘Usability testing’ involves observing real users as they interact with the interface and collecting feedback to identify any issues and areas for improvement. It typically involves defining specific scenarios and tasks to simulate realistic user interactions and to provide insights into how well the design supports those tasks.
  3. The World Wide Web Consortium (W3C) is an international community who work together to develop Web standards and publish the Web Content Accessibility Guidelines (WCAG).

the web publisher's point of view

Content planning, production and strategy are of course not part of a designer's job per se. However, we are part of the web team overall and it is important that we understand the nature of the content we are to design for. Without good content, inclusive design is not possible. Without content to work with right from the start, we would not be doing design work but merely be experimenting with possible scenarios, creating empty shells.

Content precedes design. Design in the absence of content is not design, it's decoration.

Jeffrey Zeldman, 2008

This quote really does hit the nail on the head. If we use placeholder text we are working without the context or real purpose as any visual aspect would be created in a vacuum that is yet to be filled. This means our design might, or might not, work at all. This is the reason for the 'content out' method ~ why it is the only approach that will be effective. Only when we work with the actual content itself can we create designs that will be fitting and true to purpose.

It is likely that we will at least work on one website for which we will produce our own content, our portfolio site. Let's switch mind set for a moment and consider what actually makes good content. This will allow us to learn about some general aspects that will both help us for our own site, as well as allowing us to advise our clients.

why good content matters

We're all individuals with our own tastes and preferences but when it comes to what we expect from a website, it all comes down to pretty much the same thing: good content. A website with a bare and minimal design might not deliver much eye candy but if the content is top quality, we will enjoy the reading and viewing and come back for more. To get this right as web publishers, we should look first to produce good text and accompanying media and then how to present it well on the page.

illustration of content types, people and devices.

As content producers and publishers, we have to consider the factors affecting the site visitor's experience when viewing our publications. These include the device/browser used, the connection and the access and presentation of content within the overall site. At the core of it is the text in all its forms: the main article with its sub-/headings, lists, quotes and paragraphs as well as the microcopy, i.e. the phrasing of menu links and prompts.

as site visitors: what we want

  • near-instant results on any search what happens: we perform a web search, click on the most suitable-sounding link and expect to find what we searched for = if not – skim page or leave
  • quick & easy access to what we are looking for what happens: on page load, we hastily skim the content, searching for the quickest way to our point of interest. = if none found – abandon site
  • scannable text / easy skim reading what happens: we read headlines, parts of the first paragraph, scroll and continue skimming. = if not clear – go elsewhere
  • accurate and up-to-date content what happens: we seem to find what we were looking for and will be expecting recent publishing dates. = if too old – consider something else/newer
  • clear referencing of information what happens: we arrive via a search on the page, check for details on author/creator and date for authenticity. = if not found – return to initial search

Instead of taking our time, we tend to access web content in a rush. Always skimming the overall page and looking for the next hook to lead us to the sought-for information. Good content, when presented well, will answer our questions, allow us to get to the goods quickly and easily which in turn will result in a good user experience.

as content publishers: what we can do

  • publish regularly and only high quality content ongoing production of new content + keep content and setup updated + use effective SEO techniques to boost findability ! produce/publish good content regularly
  • accessible menu and search function succinct phrasing + clear signposting + effective layout/hierarchy of all content ! focus on clear IA and inclusive design
  • good web copy and typesetting well-written text + fitting choice of typeface/s + clear hierarchy via sub-/headings + good use of white space ! write for people, present clearly
  • set effective update cycle for new content put together an achievable publishing schedule for updates to site + ensure clear dating of new content ! publish/update site regularly
  • include expected details and references ensure site inc. all content are clearly credited + include dates and details for authenticity ! include credit and context

We can do a lot to make sure that our site does deliver well. This starts with the content itself, the core importance being on the text. Only with good content in hand can we consider the other aspects, like the ease of access and presentation on the webpage. Quality content can have its impact when we format and present it well.

In his book ‘Don't make me think!‘[1], Steve Krug concludes clearly how a poorly planned and implemented design will affect site visitors' attention and results in more time and mental energy spent. When we publish online, our focus has to be ease of access to the sought-for content.

screenshot of chapter1, Don't make me think book, © Steve Krug 2006.

We are then confronted with the actual scenario - how we might design with thorough planning and best of intentions, only to find that our site visitors are not at all doing what we expected. Therefore, we have to consider carefully our own online behaviour, and more importantly, that of our site visitors.

screenshot of chapter2, Don't make me think book, © Steve Krug 2006.

how to create good content

produce, revise, iterate

Our content production will follow the overall project planning and stay true to the goal of the site. This means finding the right tone of voice for textual elements, producing fitting supplementary content and creating an effective design for type and layout.

As soon as practically feasible, we will reach out to people from within our target group, ask them to view and read our content and request their input and feedback. Publishing online means we are starting a conversation ~ the earlier you get people involved, the better the end result will be. This user-centred approach will be the foundation of our inclusive design going forward.

While there is no formula for effective web copy, the suggested inverted pyramid approach, as given by the ONS[2] is a good starting point generally.

the inverted pyramid

© ONS : inverted pyramid.

Overall, good content is…

  • user-centred
  • clear
  • concise
  • appropriate
  • consistent
  • useful
  • easy to understand, view and read

The following notes on how to write effective copy for the web is merely scratching the surface, of course. Becoming a professional writer requires much practice and goes much, much deeper than these brief lists of pointers. The aim is merely to offer advice to novice writers, highlight important aspects in writing and publishing text online, prevent common mistakes and share some tips of what works.

write for people

finding the right tone of voice

Reading online is part of a connection, a conversation between the producer/creator and the intended audience. To be successful, it is important that we write for our target group to stir their interest and foster engagement.

Tip for most written pieces published online:
Ensure that the first paragraph establishes the tone of voice and introduces / summarises the text in hand, giving it its context. This benefits both the site visitor as well as the search engines and is considered best practice.

effective headlines & sub-/headings

From the days of the arrival the printed word, headlines are written to draw people in. The headings and subheadings online serve the additional purpose of adding hierarchy to the page and making skim reading easy. Time is well spent on refining the exact wording or making a specific addition to the text in form of sub/headings (if not already in place).

Nice-to-read sentences

A general rule of thumb is to write text that can be read and superficially understood by a 7-10 year old. This might sound wrong, and does not apply to all written text online, of course, but it works very well. By keeping sentences short, reading is easier and quicker, resulting in more time spent on the site. Text becomes accessible to a wider audience.

formatting text

Typesetting and layout will greatly contribute to the reading experience. Formatting text well will make it accessible, easy to skim and read. Poor formatting, such as text set to the same size, lacking spacing, will appear like a wall of letters. This will be much harder and more laborious to read for all, causing major issues for others, those with dyslexia, for example. Adding appropriate paragraphs with clear margins and using headings and media will give the content structure and hierarchy and will result in a better reading experience for all.

What to do.

  • Do ensure legibility of all text. The most important aspect of typesetting is legibility for all. This means ignoring subjective preferences and setting typesize to a comfortably large size, set appropriate line height and ensuring that the contrast between text and background colour is sufficient.
  • Do use sub-/headings to add hierarchy. Text, especially if long-form, should be presented with a clear structure on the webpage. It will benefit from featuring a clear hierarchy to encourage skim reading and offer meaningful markers throughout the page. These can be set as in-page links as fitting.
  • Do use paragraph and lists to add structure. Text formatting should complement the content and use good spacing for a clear layout of text. Using varied options, e.g. quotes set as pullquotes within the page, will result in an engaging layout and a better reading experience. Paragraphs and lists will break the text into easy-to-read ‘chunks’, aiding skimming of the page.
  • Do ensure consistency. Consistency of both text (phrasing/tone) and design (format/layout) across all page will be essential for good accessibility, good user experience as well as branding and promotion. Ensuring that established typefaces, colours and layouts become a pattern across all pages of a website will create familiarity during browsing and smooth interactions thoughout.
  • Do experiment with layout. Layout and text formatting should be creative and engaging the site visitor in keeping with the site's mission. This can be done by adding different format options, intersecting text with appropriate media (images/video) and allowing plenty of white space between elements. Original and unique approaches can be effective, as long as legibility remains the core focus.

What not to do.

  • Do not set single-sentence paragraphs. For a good reading experience, it is important to consider the flow of text, rather than aim to 'chunk' text into small portions. Studies show that paragraphs which contain only a single sentence slow down reading and result in a choppy and more tiring experience.
  • Do not set text to all uppercase. Words set in all capitals are more difficult to read as their 'shape' is no longer as unique as the standard setting. We tend to recognise words quicker than we read them when they are set this way. All uppercase will slow down reading, making it less accessible as well - and is often seen as 'too loud'.
  • Do not underline text that is not a link. It is a common assumption that underlined text online is understood as a link. Adding a line below text, like a heading, is not the same as adding the underline to text, e.g. within a paragraph. Be aware of common patterns and work with them.
  • Do not centre-align paragraphs. This might look aesthetically pleasing to the eye on first glance. However, reading more than 2-3 lines of centre-aligned text will demand a lot more concentration and mental energy. It causes the reader to have look for the start of the line each time as the lines do not start at the same horizontal point.
    Left aligned text is much easier to read as our eyes will just go on autopilot to find the start of the new line as it will be near the previous line's starting point.
  • Do not succumb to poor type choices. Be very careful with script fonts, fonts which aim to imitate handwriting and fonts with a primarily italic or ornamental style. You might like them, find them easy to read - but not everyone will. If your script font is merely to highlight small text elements, then this can work. But avoid setting the main copy to anything fancy and stick to a clearly legible font instead.

footnotes

  1. ‘Don't make me think!‘ is considered a must-read book for anyone working on the web. One of the most quoted books to read for anyone looking to get into UX - highly recommended!
  2. ONS is the office for national statistics. The inverted triangle method is part of their guide to writing about statistics: style.ons
illustration of accessibility and user experience focus points.

Design for UX & accessibility

While user experience and accessibility are two different topics when it comes to the work involved, there is a strong connection between them - one that is worth considering. The intrinsically linked nature of both will allow us to keep our design process user-centred and aim for the most inclusive final result as possible.

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 5.3MB (optimised) PDF, 10.5MB (original)

Six thinking hats

  1. lateral thinking method
  2. tool for decision making and project planning
  3. originally designed for helping business managers
  4. this method can be applied to many fields/projects
  5. Six Thinking Hats
  6. About Dr Edward De Bono

By understanding that an accessible design is a good foundation for a good user experience we will be able to approach our projects from the right angle. Using the ‘content out’ approach in combination with working with user personas we can make sure that our design work will include the most important aspects: to deliver a user-friendly website, one that will be accessible as well as a pleasure to use.

illustration of accessibility and user experience focus points.

Effective inclusive UX design:

  • focus on your users.
    study & learn from their behaviour.
    listen & observe | review | iterate | repeat
  • consistency is key.
    establish your approach and stick to it, across all aspects:
    content | copy | design | interaction
  • provide alternatives to all media.
    content | copy | design | interaction
  • offer a positive experience.
    quality of content | tone of language | delight to use/access

design for inclusion

Good design is thorough down to the last detail.
Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.

Dieter Rams, Vitsœ

Our project planning starts with the content. To ensure that our final site will be accessible to all we have to prepare alternatives to all non-textual content. This means that audio and video media requires captions and transcripts, for example. This is both part of the content production and then has to be incorporated into the design as well.

Accessibility means to always consider all abilities. physical, sensory, congnitive... design for inclusion.

physical

Ensure access to functions via keyboard - test by using tab key to navigate site
Accessibility means to always consider all abilities. physical, sensory, congnitive... design for inclusion.

sensory

Provide captions/transcripts for visual/audio content - provide text alternatives for images
Accessibility means to always consider all abilities. physical, sensory, congnitive... design for inclusion

cognitive

Add alternative versions of content - use visuals/icons and text in combination
Accessibility means to always consider all abilities. physical, sensory, congnitive... design for inclusion
Design with people for people. Design for inclusion and delight.

Inclusive Design Principles

These Inclusive Design Principles are about putting people first. It's about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really.

  • Provide comparable experience
    Ensure your interface provides a comparable experience for all so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.
  • Consider situation
    People use your interface in different situations. Make sure your interface delivers a valuable experience to people regardless of their circumstances.
  • Be consistent
    Use familiar conventions and apply them consistently.
  • Give control
    Ensure people are in control. People should be able to access and interact with content in their preferred way.
  • Offer choice
    Consider providing different ways for people to complete tasks, especially those that are complex or non standard.
  • Prioritise content
    Help users focus on core tasks, features, and information by prioritising them within the content and layout.
  • Add value
    Consider the value of features and how they improve the experience for different users.
ballons in the sky, title: Inclusive Design Principles

Léonie demos her screen reader

Smashing Magazine published a brilliant article, titled How A Screen Reader User Accesses The Web: A Smashing Video – in which Bruce Lawson introduces a webinar with Léonie Watson. It shows recordings of Léonie using a screenreader to access the web – an excellent demo with insights not only from a blind user but one with special expertise in dev and accessibility. Make sure to watch in its entirety!

Try keyboard only

To understand how someone with accessibility needs views a website, I'd highly recommend that you try this out yourself. Put your mouse away and try to manage with only keyboard navigation. Set up a screenreader and try out its function to see how well you'd manage to navigate the webpage. I found this to be a humbling experiment which highlighted the necessity of good accessibility of content.

design for delight

Continuing our user-centred approach we will then build onto the foundation of accessibility ~ working towards a good user experience. How much we can do, or how deep we can delve into the UX design might depend on the size of the project (both in terms of timeframe and budget). However, we will be able to do much even on smaller projects and with small teams, or even if we're doing the project only by ourselves.

A good user experiences is really the result of a user-centred approach, of involving people as soon as possible in the design process. In the early stages of our career, taking on smaller projects on a freelance basis, for example, we might the designer as well as the developer. In that case, we can make sure that our client is involved in all aspects directly from the start. This will begin with planning, content strategy, and cover the content structure and ultimately the design. Involving the target group as soon as practical and possible and continuing this collaboration until project completion will ensure a good end result.

words: work with people, work for people + line of figures depicting different people, abilities and occupations.

If the project and the web team involved is larger, with more time and budget in hand, then the exploration of the user journey, the personas and their specific expectations, needs and goals can be explored in much more depth, of course.

Design for real life

When we work on our designs and build our sites it is all too easy to imagine a typical scenario, to think of a calm situation when our site user is viewing our site with time to spare and without too much distraction. It is important however not to make any assumptions, to imagine the less common moments and locations.

‘Design for real life‘, written by Eric Meyer and Sara Wachter-Boettcher and published by ‘A Book Apart‘, is a must-read for anyone working on the web. This book looks at the concept of compassionate design and highlights the importance of considering the diverse range of users and their real-life experiences. The book offers insights and practical strategies for creating more inclusive and empathetic designs.

photo of Eric Meyer + cover and details of his book 'design for real life' .

‘Designing for crisis‘ preceded the book. It is a talk Eric gave in 2015 and it is one of the most moving and insightful conference talks - one which everyone working in web should watch. This very personal experience, shared by one of the brightest minds in our industry, painfully illustrates how our designs and builds will fail in real life scenarios unless we consider our users mindfully. I cannot recommend it strongly enough, it will certainly stir your emotions and make you a better and more empathic designer.

Note: the original, high quality video was hosted by AnEventApart on Vimeo but has been taken down. This is a recording from Generate Conference and is of poorer quality. The start of this video is a little odd as the introduction is chopped off and the slides are stretched vertically. But regardless of these flaws, it's still very much worth watching.

useful tools

related reading

what makes a good interface?

It appears you don't have a PDF plugin for this browser. You are most welcome to download the PDF file.

download slides: PDF, 1.6MB (optimised) PDF, 17.4MB (original)

In this slide deck:

Gestalt principles
  1. Proximity
  2. Similarity
  3. Prägnanz
  4. Symmetry
  5. Closure

Referenced sites

  1. workfu.com (no longer online)
  2. london.craigslist.org
  3. totaljobs.com
  4. uk.authenticjobs.com, (no longer online)
    view US version: authenticjobs.com

One phrase that is commonly used to describe what makes a design successful and effective is: “good design is invisible”. This expresses that if something is easy to use and does not interfere with the action it is designed for, then the design itself delivers well. If we think of a door handle, for example ~ we will not consciously take notice of it but simply use it. Only if we struggle to open the door would we pay attention as a result of the door handle being awkward or difficult to use.

The better the design, the more invisible it becomes.
What makes a design visible is the frustration it brings. Great designs should be experienced and not seen.

Jared M. Spool, UIE

This definitely applies to user interface (abbreviated: UI) design. If no one notices our site menu and happily browses the site, our design works as intended. We will have achieved our goal of a user-friendly and accessible navigation.

moving image: ‘how keys work’ via tweet from @Cennydd, https://twitter.com/Cennydd/status/293761891896020993. static image: ‘how keys work’ via tweet from @Cennydd, https://twitter.com/Cennydd/status/293761891896020993.
hover image to view in motion. ‘how keys work’ via tweet from Cennydd Bowles

Like a key to open a lock, our interfaces will be designed to ‘unlock’ the site and its functions. Our UI design has to give easy access to the content without bothering the user with the complexities which might lie beneath ツ

Before we fall into the usual pattern of doing what’s popular – it will serve us well to consider all aspects of the interface to be designed — and once in testing, ask the right question to review the proposed design.

illustration of user considerations for interfaces.

who / what / how

user-centred planning:

  • who will be using our interface? – our target group We have to focus on the fact that it is not us, or even our clients, but the end user who is to guide the approach to interface.
  • what is their motivation and goal? – user journey We need to understand whether our interface is purely navigational or includes features with more involved functions (like sign-ups etc).
  • how will they be accessing it? – device / connection / app Plan well to avoid complications during testing. Test early and frequently.

asking the right questions

usability testing & observing:

  • how easy is it to complete the task in hand? Do our users navigate with ease? Or pause and hesitate?
  • how efficient is the process? Do our users complete the task smoothly? Or does the involved process take too long?
  • how well are confirmations/errors handled? Do our users understand and navigate errors easily? Or is the error handling likely to prompt our users to abandon the process?
  • is using your interface a pleasure or pain? Are you users happy when using your interface? Or do they frown and feel frustrated?

learning by observation

The more we observe interfaces, study their details and the way interactions are designed, the more we will understand and learn. Here are two websites created to test our attention to detail and point towards.

screenshot of tutorial1, showing 2 screens for comparison.

Can't Unsee is a tutorial/quiz that challenges you to find the details that are wrong via comparison of two given images. Great fun to play ~ you can learn a lot and train your eye ツ

screenshot of opening screen showing confusing text prompts and button.

User Inyerface is a ‘worst-practice UI experiment’ that will drive you mad... a demo of how infuriating poor text prompts, badly designed interaction and colour can be.

Design a login

circular visual of a login form.

Your brief is to design a single login form, including all possible details.
The aim is to make you focus on which details would be required to make the login user-friendly and easy. In a real life scenario, the context would of course dictate much of the requirements. This practice project is intended to allow you to focus on the small details alone, making you aware of what can make a simple form nice to use.

Consider all aspects involved in a login form: the text prompts, the positioning and layout of the form fields and their labels. Draw out a mini user journey to ensure that you cover all scenarios. Take time to explore the different methods of layout for all form elements and consider the effect on the usability and accessibility.

Objectives:

  1. sketch out the steps involved in the login process, include the full process and different situations.
  2. design alternative presentations of the labels and notification messages; include confirmations as well as error messages.
  3. implement at least the 2 different form designs for comparison.

Learn accessibility

When we markup our content with HTML, our webpages are accessible by default. The aim is to ensure that all content remains accessible to everyone, their browsers and devices. This is something we should consider as soon as we build our pages. MDN has a section which will explain and elaborate and show us how we can understand how to improve the accessibility of our site.
read: Accessibility — Make the web usable by everyone

CSS selectors

Find out more on the selectors used in the 'Toggle it!' tutorial (under 'site navigation'):

read: Adjacent sibling combinator read Guide: Attribute Selectors read reference: Attribute Selectors

Web forms — Working with user data

sketch of form © MDN Forms may seem quite simple and straight forward. We use them all the time without much thinking. However, both the design and the underlying code will need to be carefully crafted to not only function well but also be accessible and user-friendly.

read references:
<form>: The Form element
<input>: The Input element

The MDN tutorials on Web forms — Working with user data are an excellent introduction and will guide you through.

A note on focus highlighting

For the Toggle it! tutorial, the menu toggle's focus highlight has been set up with :focus-visible. Usually, especially in the case of form fields and buttons, we would use :focus alone which will show the highlight whichever way the user interacts with the element. In our case, there is no need for the visual highlight via the cursor and so we are only triggering the highlight if the tab key accesses the toggle.

find out more: :focus-visible