Decoration elements and Accessibility - accessibility

Question

I'm not sure how to deal with anything(except images) that is used for design/decoration only in terms of accessibility. For example, if in case like this I'll use an image, I'd simply use alt="" or use CSS background image, so the AT for example will ignore it. But what if I'm using some <div> or anything else? It can be a div with some CSS styling that is presented in a code-way, instead of image, or it can be some text with CSS styling so it will be just for decoration(instead of images), or really, anything else. How should I mark it so it will be ignored in a proper way by AT?
Simple example(for request):
<div><span>For Decoration</span></div>
div{
width:0; height:0;
border-bottom:116px solid #009;
border-left:500px solid #900;
margin:0 auto;
}
div span{
display:block;
position:absolute;
margin:0 auto;
left:0;
right:0;
width:150px;
color:#fff;
}

Answer 1

There are two solutions to this:
1) if you are using an empty tag such as a div with no text in it, the screen reader will ignore it automatically. You don't need to do anything in particular.
2) if you are using a tag with text inside you should: a) give it an aria-hidden="true" if you don't want the screen-reader to read the text or b) give it a role="presentation" if you do want the screen-reader to read the text but not announce it as a particular type of element.
-------------------
Based on the comments on this post I have added code below showing an example. It shows when you wouldn't need to do anything (the first and last div) and when you would want to use aria-hidden and role="presentation".
The top line is purely for decoration. Part of it is empty divs and part of it is text. The different words for "Hello" in the p tag should be seen but don't need to be read since they're purely ornamental which is why I am using role and aria-hidden on it.
.end {
display: inline-block;
width: 5%;
height: 20px;
border: 5px solid transparent;
}
.end-left {
border-left-color: #999;
border-top-color: #999;
}
.end-right {
border-right-color: #999;
border-top-color: #999;
}
.languages {
display: inline-block;
width: 80%;
text-align: center;
font-family: 'copperplate', 'century gothic';
color: #999;
}
.languages span {
display: inline-block;
width: 15%;
}
<div class="end end-left"></div>
<p class="languages" aria-hidden="true" role="presentation">
<span class="english">Hello</span>
<span class="french">Bonjour</span>
<span class="italian">Ciao</span>
<span class="spanish">Hola</span>
<span class="hinid">Namaste</span>
<span class="persian">Salaam</span>
</p>
<div class="end end-right"></div>
<h1>Languages</h1>
<p>Welcome to your first language lesson. You will learn how to speak fluently.</p>