Difference between revisions of "Table Element"

From Level Access Web Labs
Jump to navigation Jump to search
(→‎Simple Table for Healthcare Plan(Humana Demo): Not Accessible)
(→‎Simulated table with ARIA roles (Experimenting with visually hidden text in devices))
 
(17 intermediate revisions by 3 users not shown)
Line 23: Line 23:
 
     <td>Select any Doctor who accept HMO</td>
 
     <td>Select any Doctor who accept HMO</td>
 
   </tr>
 
   </tr>
−
</table>
+
<tr><td><button aria-label="Enroll for Public Medicare">Enroll</td>
−
 
+
     <td><button aria-label="Enroll for Public Choice">Enroll</td>
−
<table role="presentation">
 
−
<tr><td><button title="for HMO">Enroll</td>
 
−
     <td><button title="for PPO">Enroll</td>
 
 
</tr>
 
</tr>
 
</table>
 
</table>
−
 
 
</html>
 
</html>
  
−
==Simple Table for Healthcare Plan(Humana Demo)==
+
==Simple Table for Healthcare Plan(Humana Demo) - Accessible==
 
<html>
 
<html>
 
<table class="table">
 
<table class="table">
Line 57: Line 53:
 
     <td>Select any Doctor who accept HMO</td>
 
     <td>Select any Doctor who accept HMO</td>
 
   </tr>
 
   </tr>
−
  <tr>
+
  <tr><td><button>Enroll</td>
−
    <td><button accesskey="l"> Enroll </button></td>
+
     <td><button>Enroll</td>
−
     <td><button accesskey="l"> Enroll </button></td>
+
</tr>
−
  </tr>
 
 
</table>
 
</table>
 
</html>
 
</html>
  
−
==Simple Table with Colgroup, Col, Thead, TBody, and TFoot==
+
==Simple Table with Colgroup, Col, Thead, TBody, and TFoot with summary==
 
<html>
 
<html>
 
   <head>
 
   <head>
Line 135: Line 130:
 
</tr>
 
</tr>
 
<tr>
 
<tr>
−
<td scope="row" >Denver</td>
+
<th scope="row" >Denver</td>
 
<td>8</td>
 
<td>8</td>
 
<td>30</td>
 
<td>30</td>
Line 310: Line 305:
 
   
 
   
 
</table>
 
</table>
 +
</body>
 +
</html>
 +
 +
==Simulated table with ARIA roles (Experimenting with visually hidden text in devices)==
 +
<html lang="en">
 +
<head>
 +
<style type="text/css">
 +
.annotate {
 +
  font-style: italic;
 +
  color: #366ed4;
 +
}
 +
 +
[role="table"] {
 +
  display: table;
 +
}
 +
 +
[role="table"] > div[id] {
 +
  display: table-caption;
 +
  font-style: italic;
 +
}
 +
 +
[role="table"] [role="row"] {
 +
  display: table-row;
 +
}
 +
 +
[role="table"] [role="cell"],
 +
[role="table"] [role="columnheader"] {
 +
  display: table-cell;
 +
  padding: 0.125em 0.25em;
 +
  width: 8em;
 +
}
 +
 +
[role="table"] [role="columnheader"] {
 +
  font-weight: bold;
 +
  border-bottom: thin solid #888;
 +
}
 +
 +
[role="table"] [role="rowgroup"]:last-child [role="row"]:nth-child(odd) {
 +
  background-color: #ddd;
 +
}
 +
 +
.sr-only {
 +
position:absolute;
 +
left:-10000px;
 +
top:auto;
 +
width:1px;
 +
height:1px;
 +
overflow:hidden;
 +
}
 +
 +
</style>
 +
</head>
 +
<body>
 +
<div role="table" aria-label="Students" aria-describedby="students_table_desc">
 +
        <div id="students_table_desc">Students currently enrolled in WAI-ARIA 101 for the coming semester</div>
 +
        <div role="rowgroup">
 +
          <div role="row">
 +
            <span role="columnheader">First Name</span>
 +
            <span role="columnheader">Last Name</span>
 +
            <span role="columnheader">Company</span>
 +
            <span role="columnheader">Address</span>
 +
          </div>
 +
        </div>
 +
        <div role="rowgroup">
 +
          <div role="row">
 +
            <span role="cell"><span class="sr-only">Additional information for</span>Fred</span>
 +
            <span role="cell">Jackson</span>
 +
            <span role="cell">Acme, Inc.</span>
 +
            <span role="cell">123 Broad St.</span>
 +
          </div>
 +
          <div role="row">
 +
            <span role="cell">Sara</span>
 +
            <span role="cell">James</span>
 +
            <span role="cell">Acme, Inc.</span>
 +
            <span role="cell">123 Broad St.</span>
 +
          </div>
 +
          <div role="row">
 +
            <span role="cell">Ralph</span>
 +
            <span role="cell">Jefferson</span>
 +
            <span role="cell">XYZ, Inc.</span>
 +
            <span role="cell">456 Main St.</span>
 +
          </div>
 +
          <div role="row">
 +
            <span role="cell">Nancy</span>
 +
            <span role="cell">Jensen</span>
 +
            <span role="cell">XYZ, Inc.</span>
 +
            <span role="cell">456 Main St.</span>
 +
          </div>
 +
        </div>
 +
      </div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 13:24, 19 August 2020

Simple Table for Healthcare Plan(Humana Demo): Not Accessible

Compare Healthcare Plan
Public Choice Public Medicare
PPO Plan HMO Plan
Monthly Premium $50.00 Monthly Premium $20.00
Office Visit: $15 copay No Office Visit copay
Select any Doctor who accept PPO Select any Doctor who accept HMO

Simple Table for Healthcare Plan(Humana Demo) - Accessible

Compare Healthcare Plan
Public Choice Public Medicare
PPO Plan HMO Plan
Monthly Premium $50.00 Monthly Premium $20.00
Office Visit: $15 copay No Office Visit copay
Select any Doctor who accept PPO Select any Doctor who accept HMO

Simple Table with Colgroup, Col, Thead, TBody, and TFoot with summary

Course Description Enrollment
Total 85
PDF Accessibility A comprehensive review of PDF accessibility including remedation in Adobe Acrobat Profressional 35
Web Accessibility Basic A review web accessibility 30
Mobile Accessibility An overview of iOS and Android accessibility testing 20

Complex Table with Scope

Temperature Chart
City Winter Summer
Morning Afternoon Morning Afternoon
Denver 8 30 50 80
Fairfax 20 40 65 90

Complex Table with IDs and Headers

City Winter Summer
Morning Afternoon Morning Afternoon
Denver 7 29 50 80
Fairfax 20 40 65 90

Results

NVDA 2017.1 Results are:

  • IE – incomplete announcement of headers.
  • Firefox – correct announcement of headers
  • Chrome – correct announcement of headers

Layout Table

About Us SSB BART Group was founded in 1997 by engineers with disabilities.
Contact Us You can reach us at sales@ssbbartgroup.com

Simple HTML Table with no scope

January February March April
1 2 3 4
5 6 7 8

Complex table with multiple rowgroup scope

Default Related Service Fees
Category Sub-Category Type Description Amount Charged
Default Cost Valuation Cost Broker Price Opinion Sample descripton 1 $200
Full appraisal Sample descripton 2 $300
Inspection Cost Inspection Sample descripton 3 $400
Bankruptcy Costs Bankruptcy Costs 2 Bankruptcy Costs 3 Sample descripton 4 $500

Simulated table with ARIA roles (Experimenting with visually hidden text in devices)

Students currently enrolled in WAI-ARIA 101 for the coming semester
First Name Last Name Company Address
Additional information forFred Jackson Acme, Inc. 123 Broad St.
Sara James Acme, Inc. 123 Broad St.
Ralph Jefferson XYZ, Inc. 456 Main St.
Nancy Jensen XYZ, Inc. 456 Main St.

Retrieved from "https://labs.levelaccess.com/index.php?title=Table_Element&oldid=6773"