ANDI not recognizing ARIA role-based table rows - accessibility

I'm working with a data table constructed from DIVs and styled as a CSS grid (not my idea! and I've been asked to leave it that way, so please just accept that as an immutable condition). My task is to make it accessible and, for now, I'm testing with ANDI in Chrome on Windows. It's an Angular application with Bootstrap, if that makes a difference.
(UPDATE at another's request: ANDI is a detailed web accessibility analytical tool published by the US Social Security Administration at https://www.ssa.gov/accessibility/andi/help/install.html. It's a favelet, you just save a bookmark to it and then click the bookmark when you have a page up in your browser.)
When I open the page in the browser and turn on ANDI, it finds the table, with its 13 columns and 100 data rows in addition to the header row, but it flags two errors:
"ARIA table has no [role=row] rows."
"<table[role=table]> has 1313 cells not contained by [role=row]."
And, indeed, while ANDI marks the table with a dashed border, it doesn't mark the cells, nor does it respond to my hovering the cursor over them.
There's an Angular component element, the data row component, <app-content-row>, in the middle of this. I wondered whether that could be source of the problem, but I tried removing it, leaving only the row with the column headers, and ANDI gave me the same report.
I can't provide the full code for proprietary reasons, and for clarity I'm going to leave out the directive (_ngcontent-wjw-c154, in this instance) that Angular inserts into every element, but looking at it in the Chrome inspector window, it starts, basically, with:
<div role="table" class="..." ...>
<div role="rowgroup" style="display: contents;">
<div role="row" ...>
<div role="columnheader" ...>ID</div>
<div role="columnheader" ...>Name</div>
<div role="columnheader" ...>Start Date</div>
<!-- More columnheaders -->
</div>
</div>
<div role="rowgroup style="display:contents;">
<app-content-row ...>
<div role="row" ...>
<div role="rowheader" ...>137</div>
<div role="rowheader" ...>Frapjab Industries</div>
<div role="cell" ...>04/15/2008</div>
<!-- More cells -->
</div>
<!-- More rows -->
</app-content-row>
</div>
</div>
Above is my second attempt. In my first attempt, I didn't even have the role="rowgroup" divs wrapped around the header row and around the data rows, and I guessed that maybe they, unlike thead and tbody in an HTML table, were required. In my third attempt, guessing that maybe the role="row" divs had to be directly inside the role="rowgroup" element, I removed the second "rowgroup" div and instead stuck role="rowgroup" into the <app-content-row> tag. That role did carry through to the code displayed in the Chrome inspector. But it made no difference in the ANDI outcome.
My fourth attempt, removing the data rows (including the Angular component tags they're wrapped in, leaving only the column header row:
<div role="table" class="..." ...>
<div role="rowgroup" style="display: contents;">
<div role="row" ...>
<div role="columnheader" ...>ID</div>
<div role="columnheader" ...>Name</div>
<div role="columnheader" ...>Start Date</div>
<!-- More columnheaders -->
</div>
</div>
</div>
Still no good. So the Angular component tags had nothing to do with it.
Are there any common causes of ANDI failing to find the table structure defined by the roles, or unable to see the defined roles? Is there anything it seems I've missed?

Related

how to find complex css selector

i want to fill text in selenium firefox broswer
how to find entering text selector its very complex for me please explain me the only way i want to achieve this using only css selector
<div class="Gb WK">
<div class="Rd"guidedhelpid="sharebox_editor">
<div class="eg">
<div class="yw oo"">
<div class="yw vk"">
</div>
<div class="URaP8 Kf Pf b-K b-K-Xb">
<div id="195" class="pq"
Share what's new...
</div>
<div id=":37.f" class="df b-K b-K-Xb URaP8 editable" contenteditable="true"
g_editable="true"role="textbox"aria-labelledby="195"></div>
</div>
</div>
</div>
</div>
You already wrote the cssSelector. However I will explain this for you. CssSelector allows you to use single/multiple attribute search. In case if you don't find a single attribute unique you can keep adding more attribute to the selector
Single attribute
[role='textbox']
Multiple attributes
[role='textbox'][contenteditable='true']
If you want to add div for a faster search that's possible too
div[role='textbox'][contenteditable='true']
Notice if I don't add div it's going to be tag independent search

What would cause the responsive features on this site not work on mobile?

I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.

Foundation 5 div heavy

I have started work on a new project and decided to give Foundation 5 a bash to see what it's like. The first thing I noticed in the documentation when creating forms with horizontal fields is they use a large number of divs for styling. So I tried an example below (second example I tried it without divs):
<!-- Example with extra divs -->
<div class="row">
<div class="large-2 columns">
<label>Contact</label>
</div>
<div class="large-6 columns left">
<select></select>
</div>
</div>
<!-- Example without extra divs -->
<div class="row">
<label class="large-2 columns">Contact</label>
<select class="large-6 columns left"></select>
</div>
These both achieve the same thing with slightly different styling. I was wondering if anyone could explain why I would use the first one (follows foundation documentation) and not the other ... with less html! I am guessing it has something to do with how foundation is used and I am just not up to speed with it enough yet.
Thanks
Having <label> in <div> will give you lot of flexibility in styling. Defining a class for <label> will restrict your styling options. For a <div> you can define height, background color, border, width, background image, gradient fill, margins, padding, and lot more. Whereas giving <label> a class name would not let you do those styling. You could try it.
Basically, a <div> works as a box or container holding some content element in it, and that gives you lot of power and flexibility in styling. Whereas defining classes for content element doesn't give you that flexibility and power.

CSS Table Formatting Improperly

I have a problem with formatting a CSS table using the Gumby framework. The first row of the table "grabs" content above it.
I suspect I have some unclosed tag, but I sure cannot find it.
Here is what I think is the releveant css:
<div class="six columns" center-text>
<div id='Tips' >
<h4>Tips for Tops</h4>
OMITTING TWO PARAGRAPHS OF TEXT
<br><br>
</div>
<div class="twelve columns center-text"><br><h2>Top Ten Individual Winners at All Clubs This Year<br> See All Club Results</h2><br>
</div>
<div id="response">
<div class="CSS_Table_Example" style="width:100%">
<table style="margin: auto;">
<tr>
<td>
etc.
The first row of the table put a border around the sides of the containing the "Top Ten..."
You can see the issue on a draft page at:
http://billhogsett.com/Whist/ajax.php?scores/index
The right hand column contains a table 50% of the time so you may need to reload a few times to see the issue.
I hope this is enough information to allow someone to solve my dilemma.
Remove background from the div or set a width so it won't go out. And set border: none for the CSS_Table_Example class to get rid off the border around.
Hope this is answers your question.
btw. don't use <br> to put some space, use margin property instead.

css response displays differently

one issue I don't quite understand.
I made an online sample, when I'm resizing the window, the SPANs response one by one.
Online sample http://jsfiddle.net/Pva7y/1/
Online Images
However, I copied the same code to my local html, the SPANs response just together.
Local Image.
why different? Thanks
HTML:
<div class="row ">
<div class="span7 blue">
1
</div>
<div class="span2 red">
2
</div>
<div class="span3 green">
3
</div>
</div>
CSS:
.blue{background-color:blue;}
.red{background-color:red;}
.green{background-color:green;}
First thing is that you forgot to use container div. Correct pattern is
<div class="container">
<div class="row">
<div class="span12">
1 2 3
</div>
</div>
</div>
See corrected jsfiddle (1).
Next, if you want your page to be responsive and fit the layout to the size of the viewport you have to also include bootstrap-responsive.css. See jsfiddle (2). In your local HTML you used either both bootstrap.css and bootstrap-responsive.css or prior files merged to one CSS for reducing client-server requests number.
Your <div>s are floated in your Fiddle, but they are not floated in your local html judging from your screenshot. And since bootstrap.css floats the <div> element with a class of span, I am guessing that bootstrap.css is not loaded properly in your local html file.
A way to troubleshoot your issue is to check the Inspector (if you're using Chrome), or Firebug (if you're using Firefox). Look at the computer style of the three <div>s in your fiddle AND your local html, and compare them. They must have been styled differently because they look different on the same browser, so that's the way to start troubleshooting.

Resources