Skip to content

Create an "accessible by default" principle. #616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jyasskin wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Create an "accessible by default" principle. #616

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98a98c5
Create an "accessible by default" principle.
jyasskin Jun 2, 2026
c95949e
Update index.bs
bkardell Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 31 additions & 36 deletions index.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,20 +296,40 @@ necessary.
Use short-lived, temporary identifiers
unless a persistent identifier is absolutely necessary.

<h3 id="devices-platforms">Support the full range of devices and platforms (Media Independence)</h3>
<!-- was "Media Independence" in the HTML Design Principles -->
<h3 oldids="css-content-should-be-visible,devices-platforms"
id="accessible-by-default">Content should be accessible by default</h3>

As much as possible,
ensure that features on the web work across different input and output [devices,
screen sizes, interaction modes, platforms, and media](https://www.w3.org/TR/ethical-web-principles/#multi).
An inattentive developer should, by default,
produce content that the widest possible set of users can interact with,
whether or not they have the [[ethical-web-principles#multi|devices, software]],
or [[ethical-web-principles#allpeople|abilities]] that the developer tested against.
That is, the simplest ways to use HTML, CSS, and JavaScript should produce content that is
[[wcag22#perceivable|perceivable]], [[wcag22#operable|operable]], and [[wcag22#robust|robust]].

One of the main values of the Web is that it's extremely flexible:
a Web page may be viewed on virtually any consumer computing device
at a very wide range of screen sizes,
may be used to generate printed media,
and may be interacted with in a large number of different ways.
New features should match the [existing flexibility](https://www.w3.org/TR/ethical-web-principles/#render)
of the web platform.
a user can choose to view a web page on
almost any device (including paper), interaction modality, and screen size,
using browsers that make a range of interface choices,
with assistive technology to support their individual disabilities.

Developers often have limited time
and don't test with all of the options that users will need to choose.
Design features to preserve and improve
the [[ethical-web-principles#render|existing flexibility]]
and accessibility of the web platform,
even when used by hasty developers.

It should take sophistication and non-default attributes, properties, and arguments
to create pages that exclude some users,
rather than requiring sophistication to include everyone.

<div class="example">
For example, the default behavior of all layout systems in CSS will not lead to content being clipped,
content overlapping other content, or content being unreachable by scrolling.

@dbaron dbaron Jun 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it might be worth mentioning possible causes of such problems, which include both variation in screen size and variation in user settings like font sizes. (That was more explicit in one of the two examples, the block/flex/grid one, that you merged into this one.)

@bkardell bkardell Jul 8, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dbaron could you suggest how you'd prefer to fix this?

These things should only happen if CSS features are used that are more explicitly choosing
such a behavior (for example, `overflow: hidden` or `left: -40em`). They should not happen by
default as a result of something like `display: flex` or `position: relative`.
</div>

<div class="note">
This doesn't imply that features which don't work in *every* possible context should be excluded.
Expand All @@ -322,18 +342,6 @@ and can be adapted to devices that don't support their original intent -
for example, a tap on a mobile device will fire a ''click'' event as a fallback.
</div>

Features should also be designed so that the easiest way to use them
maintains flexibility.

<div class="example">
The 'display: block',
'display: flex',
and 'display: grid' layout models in CSS
all default to placing content within the available space and without overlap,
so that it works across screen sizes,
and allows users to choose their own font and font size without causing text to overflow.
</div>

Sometimes features aren't yet available on some implementations or platforms
despite working on others.
In these cases, features should be designed such that it is possible for
Expand Down Expand Up @@ -1517,19 +1525,6 @@ since properties are generally setting a mode or state.

See [[#naming-is-hard]] for general (cross-language) advice on naming.

<h3 id="css-content-should-be-visible">Content should be viewable and accessible by default</h3>

Design CSS properties or CSS layout systems (which are typically values of the `display` property),
to preserve the content as viewable, accessible and usable by default.

<div class="example">
For example, the default behavior of all layout systems in CSS will not lead to content being clipped,
content overlapping other content, or content being unreachable by scrolling.
These things should only happen if CSS features are used that are more explicitly choosing
such a behavior (for example, `overflow: hidden` or `left: -40em`). They should not happen by
default as a result of something like `display: flex` or `position: relative`.
</div>

<h2 id="js">JavaScript Language</h2>

<h3 id="js-only">Use JavaScript for Web APIs</h3>
Expand Down
Loading