solex2006 / SELIProject

SELI Project
9 stars 17 forks source link

White space characters must not be used to create the appearance of columns. #81

Open ecureuill opened 4 years ago

ecureuill commented 4 years ago

This is a "not-end" requirement. What I want to mean is that this should be considered for any new page you create that Student can access. Also should correct the old pages.

I will use the label Feature Design Notes to this cases


When white space characters are used to arrange text visually to create the appearance of columns, sighted users perceive a structure that isn't represented in the code. Because assistive technologies present content in DOM order (the order that content appears in the HTML), people who use assistive technologies are likely to read the text in an order that doesn't make sense. (Also, a screen reader might announce each space character individually.)


Use one of the following techniques to restructure the content so that the DOM order matches the expected reading order:

Example 1 :x: White space characters in a <pre> element are used to create the appearance of two columns. When read in DOM order, the content doesn't make sense: "We the People general of the United Welfare, and States, in secure the Order…"

<pre>
We the People     promote the general
of the United     Welfare, and
States, in        secure the
Order to form a   Blessings of
more perfect      Liberty to
Union,            ourselves and
establish         our Posterity,
Justice, insure   do ordain and
domestic          establish this
Tranquility,      Constitution
provide for the   for the United
common defense,   States of America.
</pre>

:heavy_check_mark: CSS is used to display the content in columns in a way that the DOM order matches the expected reading order.

<style>
* {box-sizing: border-box;}
.column {float:left; width:50%;
padding:10px;}
</style>
...
<div class="column">We the People
of the United States,
in Order to form a
more perfect Union,
establish Justice,
insure domestic Tranquility,
provide for the common defense,
</div>
<div class="column">promote the
general Welfare,
and secure
the blessings of Liberty
to ourselves and our Posterity,
do ordain and establish this Constitution
for the United States of America.</div>

Related

76

Test Procedure

  1. Search the page's HTML to determine whether the page includes any <pre> elements.
  2. Examine each <pre> element to verify that white space characters are not used to arrange the text into a column. White space characters include spaces, tabs, line breaks, and carriage returns.

Expect output: Check 2 is true

github-actions[bot] commented 4 years ago

This Feature is ready to be implemented.

github-actions[bot] commented 4 years ago

This Feature is ready to be implemented.